<div class="row ">
    <a href="__URL__/add" class="btn btn-success"  >新增</a>
</div>
    <table id="list" class="table table-bordered table-striped table-condensed table-hover dataTable" style="margin-top:10px;">
        <thead>
        <tr>
            <th>#</th>
            <th>道路名称</th>
            <th>增加时间</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
<div id="infoModal" class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
</div><!-- /.modal -->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/dataTables/dataTables.bootstrap.css">

<script type="text/javascript" src="__PUBLIC__/admin/dataTables/jquery.dataTables.js"></script>
<script type="text/javascript" src="__PUBLIC__/admin/dataTables/dataTables.bootstrap.js"></script>

<script type="text/javascript">
    $('#query').click(function(){
        filterGlobal();
    });

    //搜索刷新table
    function filterGlobal () {
        if ( $('#query_form #dealman').val() == '' ){
            $('#query_form #dealman_id').val('');
        }
        $query = $('#query_form').serialize();
        $('#list').DataTable().search($query,false,true).draw();
    }
    $(document).ready(function() {
        var table =$('#list').dataTable( {
            "bLengthChange": false,
            "iDisplayLength": 20,
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "对不起，查询不到任何相关数据",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoEmtpy": "找不到相关数据",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                "sProcessing": "正在加载中...",
                "sSearch": "搜索",
                "oPaginate": {
                    "sFirst":    "第一页",
                    "sPrevious": " 上一页 ",
                    "sNext":     " 下一页 ",
                    "sLast":     " 最后一页 "
                }
            },
            "dom": '<"toolbar">frtip',
            "bProcessing": true,
            "bServerSide": true,
            "sPaginationType": "full_numbers",
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "__URL__/index/ajax/1",
                "type": "POST"
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "add_time" },
                { "data": "id" }
            ],
            "columnDefs": [
                {
                    "orderable": true,
                    "targets": 0
                },
                {
                    "orderable": false,
                    "targets": 1
                },
                {
                    "orderable": true,
                    "targets": 2
                },
                {
                    "render": function ( data, type, row ) {
                        var optHtml = '<a href="__URL__/update/id/'+ row.id +'" class="btn btn-default " >修改</a>&nbsp;<a href="#" class="btn btn-danger deleteRow"  data-id="'+ row.id +'" >删除</a>';
                        return optHtml;
                    },
                    "orderable": false,
                    "targets": 3
                }
                //{ "visible": false,  "targets": [ 3 ] }
            ],
            "drawCallback": function( settings ) {
                $("#list_filter").hide();
                $(".deleteRow").on("click",function(){
                    var id = $(this).data('id');
                    $.ajax({
                        url: "__URL__/del",
                        dataType: "json",
                        type: "POST",
                        data: {
                            id: id
                        },
                        success: function (a) {
                            $('#list').DataTable().ajax.reload();
                            alertMsg('操作成功', {icon:'success'});
                        },
                        error: function (a) {
                            alertMsg('网络不好，操作失败', {icon:'warning'});
                        }
                    })
                });
                $("a[data-toggle=modal]").on("click",function(){
                    var target = $(this).attr('data-targetID');
                    var url = $(this).attr('data-href');
                    $(target).load(url);
                    $(target).modal("show");
                    return ;
                });
            }
            //"order": [[ 4, 'asc' ], [ 5, 'desc' ]],
        } );
    });
</script>